<template>
  <el-dropdown trigger="click" @command="handleSetLanguage">
    <div>
      <svg-icon class-name="size-icon" icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
      <el-dropdown-item :disabled="language==='cn'" command="cn">中文</el-dropdown-item>
<!--      <el-dropdown-item :disabled="language==='fr'" command="fr">Français</el-dropdown-item>-->
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  import Vue from 'vue'
  export default {
    data(){
      return {
        language: undefined,
      }
    },
    mounted(){
      this.language = this.$store.getters.language
    },
    methods: {
      handleSetLanguage(val) {
        // this.language = val
        // this.$i18n.locale = val
        this.$store.dispatch('setLanguage', val)
        // 解决非admin登录，切换语言时出现bug导致页面卡死问题
        let url = window.location.href
        window.location.replace(url.split('#')[0]);
      },
    }
  }
</script>

<style scoped>
.size-icon {
  font-size: 20px;
  cursor: pointer;
  vertical-align: -4px!important;
}
</style>

